<template>
  <edit-question :data="editData" @editFinish="updateQuestion" />
  <a-page-header :title="paperInfo.name" :sub-title="paperInfo.caption" @back="$router.push({ name: 'PaperManage' })">
    <template #extra>
      <a-button key="1" @click="editQuestion(-1)" type="primary">添加题目</a-button>
      <a-button key="2" @click="fetchPaperInfo">刷新</a-button>
    </template>
    <a-descriptions size="small" :column="3">
      <a-descriptions-item label="试卷ID">{{ paperInfo.id }}</a-descriptions-item>
      <a-descriptions-item label="试卷名称">{{ paperInfo.name }}</a-descriptions-item>
      <a-descriptions-item label="试卷说明">{{ paperInfo.caption }}</a-descriptions-item>
      <a-descriptions-item label="题目数量">{{ questionList.length }}</a-descriptions-item>
      <a-descriptions-item label="试卷总分">{{ allScore }}</a-descriptions-item>
    </a-descriptions>
  </a-page-header>
  <a-checkbox-group v-model:value="selectedType" :options="questionType.slice(1)" />
  <a-skeleton :active="true" :loading="loading">
    <a-list item-layout="horizontal" :data-source="questionList">
      <template #renderItem="{ item, index }">
        <a-list-item v-if="isFilter(item)">
          <a-list-item-meta>
            <template #title>
              <a-tag color="purple"> {{ questionType[item.type] }}</a-tag>
              <a-tag color="cyan"> {{ item.score }} 分 </a-tag>{{ index + 1 }}.
              <span>
                {{ item.title }}
              </span>
            </template>
            <template #description> {{ item.content.substr(0, 50) }} {{ item.answer }} </template>
          </a-list-item-meta>
          <template #actions>
            <a @click="editQuestion(item.id)">编辑</a>
            <a-dropdown>
              <a @click.prevent>
                更多操作
                <down-outlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="handleDeleteQuestion(item)">删除题目</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </a-list-item>
      </template>
    </a-list>
  </a-skeleton>
</template>

<script>
import { message, Modal } from "ant-design-vue";
import { computed, createVNode, defineComponent, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { deleteQuestion, getPaperInfo, getPaperQuestion, getQuestion } from "../../utils/api";
import { DownOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import EditQuestion from "../../components/admin/EditQuestion.vue";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const paperId = route.params["paperId"];
    const loading = ref(true);
    const paperInfo = ref({
      caption: "",
      id: 0,
      name: "",
    });
    const editData = reactive({
      visible: false,
      questionId: 0,
      paperId: paperId,
    });
    const isFilter = (item) => {
      return selectedType.value.indexOf(questionType[item.type]) != -1;
    };
    const questionType = ["", "单选题", "多选题", "判断题"];
    // 默认全选所有类型
    const selectedType = ref(questionType.slice(1));
    const questionList = ref([]);
    const allScore = computed(() => {
      let score = 0;
      questionList.value.forEach((item) => {
        score += item.score;
      });
      return score;
    });

    // 局部刷新问题
    const updateQuestion = () => {
      if (editData.questionId == -1) {
        fetchPaperInfo();
        return;
      }
      loading.value = true;
      getQuestion(editData.questionId).then((res) => {
        let result = res.data.data;
        questionList.value.forEach((value, index) => {
          if (value.id === editData.questionId) {
            questionList.value[index] = result;
          }
        });
        loading.value = false;
      });
    };
    const editQuestion = (id) => {
      editData.questionId = id;
      editData.visible = true;
    };
    const fetchPaperInfo = async () => {
      loading.value = true;
      let result = await getPaperInfo(paperId);
      if (result.data.code != 200) {
        message.error(result.data.message);
        router.push({ name: "PaperManage" });
        return;
      }
      paperInfo.value = result.data.data;
      result = await getPaperQuestion(paperId);
      questionList.value = result.data.data;
      loading.value = false;
    };
    const handleDeleteQuestion = (item) => {
      Modal.confirm({
        title: "提示",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", {}, [
          createVNode("p", {}, "删除题目将导致题目相关内容被删除"),
          createVNode("p", {}, `将删除题目名称为【${item.title}】的题目,请确认`),
        ]),
        onOk() {
          deleteQuestion(item.id).then((res) => {
            if (res.data.code != 200) {
              message.error(res.data.message);
              return;
            }
            message.success(res.data.message);
            fetchPaperInfo();
          });
        },
      });
    };

    onMounted(() => {
      fetchPaperInfo();
    });

    return {
      paperInfo,
      paperId,
      questionList,
      allScore,
      questionType,
      selectedType,
      editData,
      loading,
      editQuestion,
      isFilter,
      fetchPaperInfo,
      handleDeleteQuestion,
      updateQuestion,
    };
  },
  components: {
    DownOutlined,
    EditQuestion,
  },
});
</script>
